Skip to content

Conversation

ihabadham
Copy link
Collaborator

@ihabadham ihabadham commented Sep 18, 2025

Migrate to react_on_rails v16 and shakapacker v8.4 with auto-registration and enhanced dev tooling


This change is Reviewable

Summary by CodeRabbit

  • New Features

    • Comments page: new ReScript-powered view with live updates, improved loading and error handling.
  • Refactor

    • Asset loading reorganized to prioritize Stimulus bundles and defer global packs for faster rendering.
    • Components auto-register; stores are now centrally registered; manual client bootstrap removed.
    • Dev startup script rewritten with explicit modes and clarified Procfile entries.
  • Chores

    • Packaging/tooling updated (packager, Sass, and config for nested entries); gem and JS deps bumped.
    • .gitignore extended to skip generated packs and local tooling; CI now generates React packs before tests.
  • Documentation

    • Added PR review guidance document.

Copy link

coderabbitai bot commented Sep 18, 2025

Warning

Rate limit exceeded

@justin808 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 5 minutes and 50 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 76f0fee and 3aec6d1.

📒 Files selected for processing (3)
  • TODO_TURBO_WARNING.md (1 hunks)
  • app/views/layouts/application.html.erb (2 hunks)
  • app/views/layouts/stimulus_layout.html.erb (2 hunks)

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Enable auto-generated React on Rails packs and auto-registration, add stores registration, update dev startup commands/Procfiles and CI to generate packs, bump shakapacker/sass, move asset injection points, adjust many import paths, add a ReScript component, and ignore generated bundles and .claude/.

Changes

Cohort / File(s) Summary
Git ignore
\.gitignore
Add blank line, comment # Generated React on Rails packs, ignore **/generated/**, and ignore .claude/.
Dependency & packaging
Gemfile, package.json, config/shakapacker.yml
Bump shakapacker to 8.4.0 in Gemfile; update shakapacker and sass in package.json; add nested_entries: true in config/shakapacker.yml.
Dev CLI & Procfiles
bin/dev, Procfile.dev-prod-assets, Procfile.dev-static-assets
Replace single-run ServerManager call with ARGV-based dispatch (hmr/static/production-like/kill/help); introduce explicit Procfile entries and optional commented services; adjust commands (rails server, res:dev, js naming).
ReactOnRails initializer
config/initializers/react_on_rails.rb
Remove webpack_generated_files usage; add config.components_subdirectory = "ror_components" and config.auto_load_bundle = true.
Packs & registration migration
client/app/packs/*
Delete legacy client-bundle.js; simplify server-bundle.js to import generated server bundle; remove manual component registrations from stimulus-bundle.js; add stores-registration.js to register stores.
Layouts / asset tags
app/views/layouts/application.html.erb, app/views/layouts/stimulus_layout.html.erb
Replace direct pack tags with append_*_pack_tag calls for Stimulus and add global stylesheet_pack_tag/javascript_pack_tag placement changes.
Import path adjustments
client/app/bundles/comments/... (multiple files)
Update many relative imports to ror_components subpaths or deeper relative resolutions; mostly module-resolution changes.
ReScript component
client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx
Add generated ReScript React component and reducer; implements fetch-on-mount, ActionCable subscription, dispatch handling, and renders CommentForm/CommentList or error.
Server registration
client/app/bundles/comments/startup/serverRegistration.jsx
Update server registration imports to reference ror_components subpaths; keep ReactOnRails.register and registerStore calls.
CI: generate packs step
.github/workflows/js_test.yml, .github/workflows/lint_test.yml, .github/workflows/rspec_test.yml
Add a step running bundle exec rails react_on_rails:generate_packs after i18n build and before tests/lint in JS, lint, and RSpec workflows.
Docs / tooling
pr-review-command.md
Add PR review guidance document describing steps and checklist for reviewing PRs.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor CLI as bin/dev
  participant Manager as ReactOnRails::Dev::ServerManager

  CLI->>Manager: start(:hmr) (default / hmr)
  CLI->>Manager: start(:production_like, "Procfile.dev-prod-assets")
  CLI->>Manager: start(:static, "Procfile.dev-static-assets")
  CLI->>Manager: kill_processes()
  CLI->>Manager: show_help()
  Note right of Manager #e6f7ff: ARGV dispatch replaces single-run entrypoint
Loading
sequenceDiagram
  autonumber
  actor Browser as User
  participant ReScript as RescriptShow.jsx
  participant API as Actions.Fetch
  participant Cable as ActionCable::CommentsChannel

  Browser->>ReScript: mount
  ReScript->>API: fetchComments()
  API-->>ReScript: comments[] / error
  alt success
    ReScript->>ReScript: dispatch(SetComments(comments))
  else error
    ReScript->>ReScript: dispatch(FetchError)
  end
  ReScript->>Cable: subscribe()
  Cable-->>ReScript: receive(newData)
  ReScript->>ReScript: dispatch(SetComments([newData]))
  Note right of ReScript #f7f7e6: useReducer + ActionCable lifecycle
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

I hop where generated bundles bloom and hide,
Auto-register my friends and tuck them inside.
Procfiles split paths, the dev server hums,
ReScript listens, ActionCable drums.
Tiny rabbit cheers — builds run with pride. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title “Migrate to react on rails auto-registration” clearly highlights the introduction of React on Rails auto-registration, which is a core change in this PR, and thus is directly related to the content of the changeset; although it omits mention of version upgrades for React on Rails v16 and Shakapacker v8.4, it still meets the criterion of referring to a real, significant aspect of the update.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

🚀 Quick Review App Commands

Welcome! Here are the commands you can use in this PR:

/deploy-review-app

Deploy your PR branch for testing

/delete-review-app

Remove the review app when done

/help

Show detailed instructions, environment setup, and configuration options.


Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
Gemfile (1)

48-52: Remove stale net-pop override

Ruby is pinned to 3.3.7 and Gemfile.lock shows net-pop coming from the Git override; no explicit require 'net/pop' was found — remove the Git override to avoid masking upstream fixes and supply-chain risk.

File: Gemfile (lines 48-52)

Apply:

-# Needed until Ruby 3.3.4 is released https://github.com/ruby/ruby/pull/11006
-# Related issue: https://github.com/ruby/net-pop/issues/26
-# TODO: When Ruby 3.3.4 is released, upgrade Ruby and remove this line
-gem "net-pop", github: "ruby/net-pop"
🧹 Nitpick comments (10)
config/shakapacker.yml (1)

24-24: Typo in comment: Procfile.dev-static.

Minor nit; helps future readers.

Apply:

-  # This is false since we're running `bin/shakapacker -w` in Procfile.dev-setic
+  # This is false since we're running `bin/shakapacker -w` in Procfile.dev-static-assets
Procfile.dev-static-assets (1)

5-5: Avoid environment-specific Redis assumption in comments.

“Redis is already running system-wide” may not hold for all devs/CI. Consider rewording to instruct enabling the line if needed.

Procfile.dev-prod-assets (1)

5-6: Ensure packs are precompiled before starting rails in prod-assets mode.

This Procfile assumes precompiled assets exist. Document the step (e.g., bin/shakapacker -p and any Rails asset precompile) or add a guard in your dev workflow.

client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx (1)

62-67: Guard unsubscribe to avoid runtime error if subscription creation fails.

If subscribeConsumer fails or shape changes, scription may be undefined or lack unsubscribe.

Apply this diff:

-  React.useEffect((function () {
-          var scription = subscribeToCommentsChannel();
-          return (function () {
-                    scription.unsubscribe();
-                  });
-        }), []);
+  React.useEffect((function () {
+          var scription = subscribeToCommentsChannel();
+          return (function () {
+                    if (scription && typeof scription.unsubscribe === "function") {
+                      scription.unsubscribe();
+                    }
+                  });
+        }), []);
bin/dev (2)

21-28: Improve fallback error handling when react_on_rails/dev isn’t available.

If require_relative fails, the script currently crashes with a stack trace.

Apply this diff:

 begin
   require "bundler/setup"
   require "react_on_rails/dev"
 rescue LoadError
   # Fallback for when gem is not yet installed
   puts "Loading ReactOnRails development tools..."
-  require_relative "../../lib/react_on_rails/dev"
+  begin
+    require_relative "../../lib/react_on_rails/dev"
+  rescue LoadError => e
+    warn "Could not load ReactOnRails dev tools. Ensure the gem is installed or lib/react_on_rails/dev exists. #{e.message}"
+    exit 1
+  end
 end

43-45: Send unknown-argument errors to stderr and exit non‑zero.

Minor polish for CLI ergonomics.

Apply this diff:

-  puts "Unknown argument: #{ARGV[0]}"
-  puts "Run 'bin/dev help' for usage information"
+  warn "Unknown argument: #{ARGV[0]}"
+  warn "Run 'bin/dev help' for usage information"
   exit 1
client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx (1)

11-19: Remove unused redirect/error scaffolding or wire it up.

error and redirectLocation are never set, so the early-return branch is dead code. Either remove it or implement proper setting logic.

-  let error;
-  let redirectLocation;
-  const { location } = railsContext;
+  const { location } = railsContext;
-
-  if (error || redirectLocation) {
-    return { error, redirectLocation };
-  }
app/views/layouts/stimulus_layout.html.erb (1)

10-11: Stimulus assets appended in head: OK.

If any views rendered with this layout use Redux stores, also append stores-registration here or ensure those pages append it explicitly.

   <%= append_stylesheet_pack_tag('stimulus-bundle') %>
   <%= append_javascript_pack_tag('stimulus-bundle') %>
+  <%# Uncomment if pages under this layout use ReactOnRails stores %>
+  <%#= append_javascript_pack_tag('stores-registration') %>
config/initializers/react_on_rails.rb (2)

5-7: Consider gating server‑side console replay/logging in production.

With broader auto‑registration and SSR enabled elsewhere in this initializer, replaying server logs can leak props/PII into app logs. Suggest restricting to dev/test:

config.replay_console   = Rails.env.development? || Rails.env.test?
config.logging_on_server = Rails.env.development? || Rails.env.test?

5-7: Optional: simplify server bundle setup via generated entrypoint.

If you want to avoid maintaining a handwritten server-bundle.js that imports the generated file, enable:

config.make_generated_server_bundle_the_entrypoint = true

If you do this, adjust config.server_bundle_js_file to match the generated entrypoint as needed. See config docs. (shakacode.com)

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4be1e1b and 48f2ab4.

⛔ Files ignored due to path filters (3)
  • Gemfile.lock is excluded by !**/*.lock
  • package-lock.json is excluded by !**/package-lock.json
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (21)
  • .gitignore (1 hunks)
  • .ruby-version (1 hunks)
  • Gemfile (1 hunks)
  • Procfile.dev-prod-assets (1 hunks)
  • Procfile.dev-static-assets (1 hunks)
  • app/views/layouts/application.html.erb (2 hunks)
  • app/views/layouts/stimulus_layout.html.erb (2 hunks)
  • bin/dev (1 hunks)
  • client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx (1 hunks)
  • client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx (1 hunks)
  • client/app/bundles/comments/startup/App/ror_components/App.jsx (1 hunks)
  • client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx (1 hunks)
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx (1 hunks)
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx (1 hunks)
  • client/app/packs/client-bundle.js (0 hunks)
  • client/app/packs/server-bundle.js (1 hunks)
  • client/app/packs/stimulus-bundle.js (1 hunks)
  • client/app/packs/stores-registration.js (1 hunks)
  • config/initializers/react_on_rails.rb (1 hunks)
  • config/shakapacker.yml (1 hunks)
  • package.json (2 hunks)
💤 Files with no reviewable changes (1)
  • client/app/packs/client-bundle.js
🧰 Additional context used
🧬 Code graph analysis (1)
client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx (2)
client/app/bundles/comments/reducers/commentsReducer.js (1)
  • action (18-18)
client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx (1)
  • CommentList (17-87)
🪛 GitHub Actions: JS CI
Gemfile

[error] 1-1: Command 'bundle install' failed: Bundler exited with code 18 due to Ruby version mismatch. System Ruby is 3.3.4 but Gemfile specifies 3.3.7.

🔇 Additional comments (22)
.ruby-version (1)

1-1: LGTM: version bump to 3.3.7.

Ensure CI picks this up (see Gemfile comment for workflow check).

Use the workflow scan script in the Gemfile comment to confirm all jobs use 3.3.7.

client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx (1)

8-10: Approve — import paths updated correctly; railsContext usage unaffected.

No logic changes required; NavigationBar, NavigationBarContainer, and constants/paths imports verified.

client/app/bundles/comments/startup/App/ror_components/App.jsx (1)

5-5: Import path fix looks correct with v16 auto‑registration.

NonRouterCommentsContainer.jsx exists at client/app/bundles/comments/containers/NonRouterCommentsContainer.jsx; ReactOnRails.getStore('commentsStore') is present in App.jsx (line 12) and NavigationBarApp.jsx (line 24). Explicit .jsx import removes the need to verify webpack extension resolution.

.gitignore (1)

56-58: Over‑broad ignore — narrow '/generated/' to ReactOnRails pack output.

Current pattern in .gitignore (File: .gitignore, ~lines 56–58) can hide unrelated generated sources (GraphQL codegen, etc.). Scope it to the React on Rails pack output paths.

-**/generated**
+# React on Rails generated packs only
+/client/app/**/generated/**
+/client/**/packs/**/generated/**

Verification scripts returned no output; confirm whether any generated directories exist in the repo before applying this change.

config/shakapacker.yml (1)

10-10: nested_entries enabled — confirm manifest keys + server-bundle alignment

  • config/shakapacker.yml: nested_entries: true.
  • Found packs: client/app/packs/{stimulus-bundle.js, stores-registration.js, server-bundle.js}.
  • Layouts reference packs via append_* helpers: app/views/layouts/application.html.erb, app/views/layouts/stimulus_layout.html.erb (use 'stimulus-bundle' and 'stores-registration').
  • server-bundle imports ./../generated/server-bundle-generated.js (client/app/packs/server-bundle.js).
  • No manifest.json found in the repo — cannot verify whether compiled manifest keys are nested (and therefore differ from the bare names used in the helpers).

Action: verify the compiled manifest.json on the build output (e.g., public/packs/manifest*.json) contains keys matching the helper arguments OR update the view helpers to use the nested manifest keys; also confirm generated/server-bundle-generated.js is emitted and referenced correctly in the manifest.

package.json (1)

81-81: react-on-rails 16 / shakapacker 8.4 — versions & auto-registration verified; confirm Webpack 5 + Node 22

yarn.lock shows [email protected] and [email protected]; config/initializers/react_on_rails.rb has config.auto_load_bundle = true and build_production_command uses shakapacker.

  • Confirm webpack 5 is present in package.json / yarn.lock and Node 22 is specified (package.json "engines", .nvmrc, or .node-version).
client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx (1)

13-15: Path updates OK — confirm client webpack CSS Modules for .module.scss

Imports and .module.scss usage look fine. serverWebpackConfig.js sets cssLoader.options.modules = { exportOnlyLocals: true }, but I did not find a client-side rule explicitly targeting /.module.(scss|sass|css)/; ensure the client webpack config (config/webpack/clientWebpackConfig.js or config/webpack/environment.js) enables css-loader modules (e.g., modules: { auto: /.module.\w+$/ } or equivalent).

Procfile.dev-prod-assets (1)

1-4: LGTM: clear header and intent.

client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx (2)

12-25: Reducer treats any object action as success. Verify only SetComments objects dispatch here.

If other object-shaped actions reach this reducer, they’ll be interpreted as CommentsFetched.


51-56: Confirm ActionCable payload shape.

received wraps data in an array for SetComments. Ensure downstream expects an array-of-comment objects.

bin/dev (2)

31-41: Command mapping reads clean.

Nice, intuitive aliases (prod/static/hmr/help) and clear Procfile routing.


33-35: Procfiles present — no action required.

Procfile.dev, Procfile.dev-static-assets, and Procfile.dev-prod-assets are present in the repo.

client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx (2)

1-1: LGTM: doc comment sync with server side.


6-6: Verified: routes path and default export are correct.

client/app/bundles/comments/routes/routes.jsx exists and exports a default JSX routes tree; import '../../../routes/routes.jsx' is valid.

import routes from '../../../routes/routes.jsx';
Procfile.dev-static-assets (1)

3-4: LGTM — res:dev script verified

package.json defines res:dev as yarn res:clean && rescript build -w.

client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx (1)

6-6: Updated routes import path looks right.

../../../routes/routes.jsx resolves correctly from ror_components to comments/routes.

client/app/packs/server-bundle.js (1)

1-5: Good separation: server bundle imports stores for SSR, generated code for auto‑registration.

Ensure server-bundle.js is not included on the client to avoid duplicate store registrations.

app/views/layouts/stimulus_layout.html.erb (1)

22-23: Confirm append_ pattern with options under Shakapacker 8.4.*

Using stylesheet_pack_tag/javascript_pack_tag with only options relies on previously appended packs. Verify tags render as expected in all envs.

app/views/layouts/application.html.erb (2)

23-25: Verify appended packs render and order is correct.

Ensure stores-registration loads before components that access stores, and that these helpers output tags as intended across environments.


8-10: Head includes Stimulus and stores — OK.

app/views/layouts/application.html.erb and app/views/layouts/stimulus_layout.html.erb include append_javascript_pack_tag('stores-registration') (and 'stimulus-bundle'); package.json contains @hotwired/stimulus — auto‑registration pack appears loaded, no action required.

client/app/packs/stores-registration.js (1)

6-9: Cannot verify store exports — confirm routerCommentsStore and commentsStore are default-exported store-generator functions and call-sites use exact names

rg output only matched reducers under client/app/bundles/comments/reducers and reported files were skipped; confirm the store file paths/exports and that callers use getStore('routerCommentsStore') and getStore('commentsStore').

client/app/packs/stimulus-bundle.js (1)

18-19: Confirmed: client auto-registration bundle is included at runtime.
app/views/layouts/application.html.erb and app/views/layouts/stimulus_layout.html.erb include append_javascript_pack_tag('stimulus-bundle'), so auto‑registered components will be available to react_component helpers.

# Note, if using React on Rails localization you will need to run
# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
js: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

❓ Verification inconclusive

Don’t swallow locale task failures; prefer shakapacker:clean over rm -rf.

The current chaining makes bin/shakapacker -w run even if react_on_rails:locale fails. Also avoid rm -rf in scripts; use the rake task.

Apply this diff:

-js: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
+js: sh -c 'bundle exec rake react_on_rails:locale && (bundle exec rake shakapacker:clean || true) && bin/shakapacker -w'

If you must keep rm, limit the “|| true” to that step only:

-js: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
+js: sh -c 'bundle exec rake react_on_rails:locale && (rm -rf public/packs/* || true) && bin/shakapacker -w'

Don’t swallow locale task failures; make the watcher conditional on the locale task

Procfile.dev-static-assets: line 12 — the current || true placement makes bin/shakapacker -w run unconditionally; apply one of these diffs:

-js: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
+js: sh -c 'bundle exec rake react_on_rails:locale && (bundle exec rake shakapacker:clean || true) && bin/shakapacker -w'

Or, if keeping rm:

-js: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
+js: sh -c 'bundle exec rake react_on_rails:locale && (rm -rf public/packs/* || true) && bin/shakapacker -w'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
js: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
js: sh -c 'bundle exec rake react_on_rails:locale && (bundle exec rake shakapacker:clean || true) && bin/shakapacker -w'
Suggested change
js: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
js: sh -c 'bundle exec rake react_on_rails:locale && (rm -rf public/packs/* || true) && bin/shakapacker -w'
🤖 Prompt for AI Agents
In Procfile.dev-static-assets around line 12, the current command uses `|| true`
in a way that swallows failures from the locale rake task and causes
`bin/shakapacker -w` to run unconditionally; change the command so the watcher
only runs if the locale task succeeds — either remove `|| true` and chain with
`&&` so `bundle exec rake react_on_rails:locale && rm -rf public/packs/* &&
bin/shakapacker -w`, or if you want to ignore errors from `rm` but not from the
rake task, group/sequence so the rake task must succeed and only the `rm` is
tolerated, e.g. run the rake task, then `rm -rf public/packs/* || true`, then
`&& bin/shakapacker -w`.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
.github/workflows/js_test.yml (1)

47-49: Good addition; ensure task availability and consider upgrading GH Actions versions.

  • Step placement is correct and aligns with v16 auto‑generated packs being .gitignored.
  • Add a lightweight preflight to surface a clearer failure if the task isn’t available on older branches, and consider bumping Actions to v4.
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - name: Checkout code
+        uses: actions/checkout@v4

-      - uses: ruby/setup-ruby@v1
+      - uses: ruby/setup-ruby@v1
         with:
           ruby-version: ${{ matrix.ruby }}
           bundler-cache: true

-      - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v3
+      - name: Use Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
           cache: yarn

+      - name: Verify React on Rails generate_packs task exists
+        run: bundle exec rails -T | grep -q 'react_on_rails:generate_packs'
+
       - name: Generate React on Rails packs
         run: bundle exec rails react_on_rails:generate_packs
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5fea685 and 7be827c.

📒 Files selected for processing (1)
  • .github/workflows/js_test.yml (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: test (22.x, 3.3.4)

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
.github/workflows/lint_test.yml (1)

46-48: Packs generation step looks right; add debug flag and confirm DB independence.

  • Append --trace for easier CI debugging.
  • This job has no DB service; confirm the rake task doesn’t touch the DB under RAILS_ENV=test. If it does, override to RAILS_ENV=development for this step only.
-      - name: Generate React on Rails packs
-        run: bundle exec rails react_on_rails:generate_packs
+      - name: Generate React on Rails packs
+        run: bundle exec rails react_on_rails:generate_packs --trace
+# If the task requires no DB, keep test. If it does, explicitly switch env just for this step:
+#     env:
+#       RAILS_ENV: development
.github/workflows/rspec_test.yml (1)

76-78: Good placement; consider ordering vs ReScript and add --trace.

  • If generated packs import ReScript outputs, run this after yarn res:build; otherwise current order is fine.
  • Add --trace for better failure diagnostics.
-      - name: Generate React on Rails packs
-        run: bundle exec rails react_on_rails:generate_packs
+      - name: Generate React on Rails packs
+        run: bundle exec rails react_on_rails:generate_packs --trace

Optional reorder:

-      - name: Generate React on Rails packs
-        run: bundle exec rails react_on_rails:generate_packs
-
       - name: Build Rescript components
         run: yarn res:build

+      - name: Generate React on Rails packs
+        run: bundle exec rails react_on_rails:generate_packs --trace
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7be827c and c775eba.

📒 Files selected for processing (3)
  • .github/workflows/lint_test.yml (1 hunks)
  • .github/workflows/rspec_test.yml (1 hunks)
  • client/app/bundles/comments/startup/serverRegistration.jsx (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: test (22.x, 3.3.4)
🔇 Additional comments (3)
client/app/bundles/comments/startup/serverRegistration.jsx (3)

8-9: Remove duplicate local store registration — stores are registered in client/app/packs/stores-registration.js.

client/app/packs/stores-registration.js calls ReactOnRails.registerStore (includes routerCommentsStore); remove the local imports and ReactOnRails.registerStore call in client/app/bundles/comments/startup/serverRegistration.jsx (lines 8-9 and 20-23).

Apply:

-import routerCommentsStore from '../store/routerCommentsStore';
-import commentsStore from '../store/commentsStore';
+// Stores registered via packs/stores-registration.js in v16 migration.

-ReactOnRails.registerStore({
-  routerCommentsStore,
-  commentsStore,
-});
+// No local store registration.

4-7: Drop manual component registration; verify ReactOnRails v16 auto-registration is enabled

Sanity check returned no matches for other manual registrations — verification inconclusive. If ReactOnRails v16 with auto_load_bundle is enabled and ror_components are auto-registered, remove the manual imports and the ReactOnRails.register block in client/app/bundles/comments/startup/serverRegistration.jsx (lines 4–18).

Apply:

 import ReactOnRails from 'react-on-rails';
-
-import App from './App/ror_components/App';
-import RouterApp from './RouterApp/ror_components/RouterApp.server';
-import SimpleCommentScreen from '../components/SimpleCommentScreen/ror_components/SimpleCommentScreen';
-import NavigationBarApp from './NavigationBarApp/ror_components/NavigationBarApp';
+// Components auto-registered by ReactOnRails v16 from ror_components.
 import routerCommentsStore from '../store/routerCommentsStore';
 import commentsStore from ../store/commentsStore';
-import Footer from '../components/Footer/ror_components/Footer';
-
-ReactOnRails.register({
-  App,
-  RouterApp,
-  NavigationBarApp,
-  SimpleCommentScreen,
-  Footer,
-});
+// No manual component registration needed.

5-5: No client bundles reference RouterApp.server — server-only import confirmed

client/app/bundles/comments/startup/serverRegistration.jsx imports RouterApp.server and that file is used only as the server webpack entry (config/webpack/server.js:23). No other references to serverRegistration.jsx or RouterApp.server were found; client counterpart is at client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx.

@justin808 justin808 changed the title Migrate to react on rails v16 Migrate to react on rails auto-registration Sep 20, 2025
@justin808
Copy link
Member

rebase on master to get the rubocop fix

@ihabadham ihabadham force-pushed the migrate-to-react-on-rails-v16 branch from c775eba to 4383625 Compare September 23, 2025 13:53
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
bin/dev (2)

30-41: Dispatcher looks good; consider a ‘dev’ alias for ergonomics.

Optional: accept “dev” in addition to “hmr” and nil.

Apply this diff:

-when "hmr", nil
+when "hmr", "dev", nil
   ReactOnRails::Dev::ServerManager.start(:development, "Procfile.dev")

43-46: Send errors to STDERR and show built-in help.

Minor UX: use warn and call show_help.

Apply this diff:

-  puts "Unknown argument: #{ARGV[0]}"
-  puts "Run 'bin/dev help' for usage information"
-  exit 1
+  warn "Unknown argument: #{ARGV[0] || '(none)'}"
+  ReactOnRails::Dev::ServerManager.show_help
+  exit 1
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c775eba and 4383625.

⛔ Files ignored due to path filters (3)
  • Gemfile.lock is excluded by !**/*.lock
  • package-lock.json is excluded by !**/package-lock.json
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (24)
  • .github/workflows/js_test.yml (1 hunks)
  • .github/workflows/lint_test.yml (1 hunks)
  • .github/workflows/rspec_test.yml (1 hunks)
  • .gitignore (1 hunks)
  • Gemfile (1 hunks)
  • Procfile.dev-prod-assets (1 hunks)
  • Procfile.dev-static-assets (1 hunks)
  • app/views/layouts/application.html.erb (2 hunks)
  • app/views/layouts/stimulus_layout.html.erb (2 hunks)
  • bin/dev (1 hunks)
  • client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx (1 hunks)
  • client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx (1 hunks)
  • client/app/bundles/comments/startup/App/ror_components/App.jsx (1 hunks)
  • client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx (1 hunks)
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx (1 hunks)
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx (1 hunks)
  • client/app/bundles/comments/startup/serverRegistration.jsx (1 hunks)
  • client/app/packs/client-bundle.js (0 hunks)
  • client/app/packs/server-bundle.js (1 hunks)
  • client/app/packs/stimulus-bundle.js (1 hunks)
  • client/app/packs/stores-registration.js (1 hunks)
  • config/initializers/react_on_rails.rb (1 hunks)
  • config/shakapacker.yml (1 hunks)
  • package.json (2 hunks)
💤 Files with no reviewable changes (1)
  • client/app/packs/client-bundle.js
🚧 Files skipped from review as they are similar to previous changes (20)
  • client/app/packs/server-bundle.js
  • config/initializers/react_on_rails.rb
  • client/app/bundles/comments/startup/App/ror_components/App.jsx
  • Gemfile
  • client/app/packs/stimulus-bundle.js
  • client/app/bundles/comments/startup/serverRegistration.jsx
  • client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx
  • client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx
  • app/views/layouts/stimulus_layout.html.erb
  • package.json
  • client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx
  • Procfile.dev-static-assets
  • config/shakapacker.yml
  • Procfile.dev-prod-assets
  • .github/workflows/rspec_test.yml
  • .gitignore
  • .github/workflows/lint_test.yml
  • .github/workflows/js_test.yml
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx
🧰 Additional context used
🪛 ESLint
client/app/packs/stores-registration.js

[error] 9-9: Insert

(prettier/prettier)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: test (22.x, 3.3.4)
  • GitHub Check: test (22.x, 3.3.4)
🔇 Additional comments (4)
app/views/layouts/application.html.erb (2)

8-10: LGTM! Asset loading strategy aligned with auto-registration.

The migration from client-bundle to stimulus-bundle and the addition of stores-registration pack correctly supports the new auto-registration approach. The use of append_*_pack_tag ensures proper loading order.


23-24: Verify the generic pack tag implementation.

stylesheet_pack_tag and javascript_pack_tag are used without pack names and likely won't load assets. Repository contains only app/assets/config/manifest.js (Sprockets) and no Webpacker/Shakapacker packs/manifest — confirm which asset system is intended and either:

  • If using Webpacker/Shakapacker: specify pack names (e.g. stylesheet_pack_tag 'application'; javascript_pack_tag 'application') and ensure the packs and manifest (e.g. public/packs/manifest.json) exist.
  • If using Sprockets: replace with stylesheet_link_tag 'application' and javascript_include_tag 'application'.
    File: app/views/layouts/application.html.erb (lines 23–24)
client/app/packs/stores-registration.js (1)

1-9: Approve — formatting fixed and store imports verified

Both ../bundles/comments/store/routerCommentsStore and ../bundles/comments/store/commentsStore exist and export default store factories, so ReactOnRails.registerStore({ routerCommentsStore, commentsStore }) is correct.

bin/dev (1)

4-20: Header docs are clear and accurate.

Matches the dispatcher behavior below.

Comment on lines 21 to 28
begin
require "bundler/setup"
require "react_on_rails/dev"
rescue LoadError
# Fallback for when gem is not yet installed
puts "Loading ReactOnRails development tools..."
require_relative "../../lib/react_on_rails/dev"
end
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

🧩 Analysis chain

Fix fallback require path; '../../lib/…' escapes the repo and will fail. Also tighten LoadError handling.

From bin/dev, the project lib is ../lib, not ../../lib. Recommend nested rescue to show a clearer error if both gem and local copy are unavailable.

Apply this diff:

-begin
-  require "bundler/setup"
-  require "react_on_rails/dev"
-rescue LoadError
-  # Fallback for when gem is not yet installed
-  puts "Loading ReactOnRails development tools..."
-  require_relative "../../lib/react_on_rails/dev"
-end
+begin
+  require "bundler/setup"
+  require "react_on_rails/dev"
+rescue LoadError => e
+  # Fallback for when the gem is not yet installed
+  warn "Loading ReactOnRails development tools... (#{e.message})" if ENV["DEBUG"]
+  begin
+    require_relative "../lib/react_on_rails/dev"
+  rescue LoadError
+    abort "ReactOnRails dev tools not found. Run `bundle install` or add lib/react_on_rails/dev."
+  end
+end

Run to verify whether a local fallback exists (expected: it usually won’t in this repo; ensuring the gem is installed is the path forward):


🏁 Script executed:

#!/bin/bash
set -euo pipefail
echo "Checking for local ReactOnRails dev tools under lib/react_on_rails..."
if [ -f lib/react_on_rails/dev.rb ] || [ -d lib/react_on_rails/dev ]; then
  echo "Found local fallback."
else
  echo "No local fallback found. Ensure react_on_rails gem is installed so require 'react_on_rails/dev' succeeds."
fi

Length of output: 175


Fix fallback require path; '../../lib/…' escapes the repo and will fail. Also tighten LoadError handling.

bin/dev (lines 21-28) — switch the fallback to ../lib and nest a second rescue that aborts if neither the gem nor a local copy is available. Verification: lib/react_on_rails/dev not found in repo (no local fallback); ensure the gem is installed or add lib/react_on_rails/dev.

-begin
-  require "bundler/setup"
-  require "react_on_rails/dev"
-rescue LoadError
-  # Fallback for when gem is not yet installed
-  puts "Loading ReactOnRails development tools..."
-  require_relative "../../lib/react_on_rails/dev"
-end
+begin
+  require "bundler/setup"
+  require "react_on_rails/dev"
+rescue LoadError => e
+  # Fallback for when the gem is not yet installed
+  warn "Loading ReactOnRails development tools... (#{e.message})" if ENV["DEBUG"]
+  begin
+    require_relative "../lib/react_on_rails/dev"
+  rescue LoadError
+    abort "ReactOnRails dev tools not found. Run `bundle install` or add lib/react_on_rails/dev."
+  end
+end
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
begin
require "bundler/setup"
require "react_on_rails/dev"
rescue LoadError
# Fallback for when gem is not yet installed
puts "Loading ReactOnRails development tools..."
require_relative "../../lib/react_on_rails/dev"
end
begin
require "bundler/setup"
require "react_on_rails/dev"
rescue LoadError => e
# Fallback for when the gem is not yet installed
warn "Loading ReactOnRails development tools... (#{e.message})" if ENV["DEBUG"]
begin
require_relative "../lib/react_on_rails/dev"
rescue LoadError
abort "ReactOnRails dev tools not found. Run `bundle install` or add lib/react_on_rails/dev."
end
end
🤖 Prompt for AI Agents
In bin/dev around lines 21 to 28 the fallback require uses
"../../lib/react_on_rails/dev" which escapes the repo and will fail; change it
to "../lib/react_on_rails/dev" and tighten LoadError handling by rescuing
LoadError for the initial gem require, then attempting the local require inside
its own begin/rescue and aborting with a clear error message if that also fails
(i.e., print an explanatory message and exit) so the script fails loudly when
neither the gem nor a local copy is available.

ihabadham and others added 13 commits September 24, 2025 15:44
- Update react_on_rails gem from 14.1.0.rc.0 to 16.0.0
- Update shakapacker gem from 8.0.0 to 8.4.0
- Update react-on-rails npm package from 14.0.3 to 16.0.0
- Update shakapacker npm package from 8.0.0 to 8.4.0
- Update Ruby version from 3.3.4 to 3.3.7
- Add migration plan document
- Configure auto-registration with components_subdirectory and auto_load_bundle
- Add nested_entries to shakapacker.yml for v16 compatibility
- Restructure components into ComponentName/ror_components/ directories
- Move App, RouterApp, NavigationBarApp, SimpleCommentScreen, Footer components
- Handle RescriptShow component with compiled JS copy
- Create stores-registration.js for manual store registration
- Update server-bundle.js to import stores and generated bundle
- Remove client-bundle.js (manual registration no longer needed)
- Update .gitignore for generated packs
- Successfully generate auto-registration packs
- Enable auto_load_bundle for automatic component discovery and loading
- Update layouts to use append pack tag pattern for v16 compatibility
- Remove manual component registration from stimulus-bundle.js
- Maintain hybrid approach supporting both auto-registered React components and Stimulus controllers
- Auto-registration now working: pages load only their specific component bundles

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
- Update bin/dev to use new ReactOnRails::Dev::ServerManager from PR #1790
- Add support for multiple development modes:
  * bin/dev (HMR development) - default mode
  * bin/dev static - static assets with auto-recompilation
  * bin/dev prod - production-optimized assets
  * bin/dev kill - clean process termination
  * bin/dev help - comprehensive help system
- Rename Procfile.dev-static to Procfile.dev-static-assets for v16 convention
- Add Procfile.dev-prod-assets for production-like asset development
- Preserve project-specific customizations (ReScript, locale tasks)
- Enhanced developer experience with better UI, error handling, and process management

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
- Add bundle exec rails react_on_rails:generate_packs step to JS CI
- Resolves missing server-bundle-generated.js error in CI builds
- Generated files are in .gitignore but needed for webpack builds

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
… v16

- Update imports to use new ror_components directory structure
- Fix paths for App, RouterApp, SimpleCommentScreen, NavigationBarApp, Footer
- Use RouterApp.server for server-side registration
- Resolves ESLint import/no-unresolved errors in CI

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
- Add bundle exec rails react_on_rails:generate_packs step to Rspec CI
- Resolves missing server-bundle-generated.js error in Rspec builds
- Required for webpack to find generated component registration files

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
- Add bundle exec rails react_on_rails:generate_packs step to Lint CI
- Resolves ESLint import/no-unresolved error for server-bundle-generated.js
- Required for linting to find generated component registration files

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@ihabadham ihabadham force-pushed the migrate-to-react-on-rails-v16 branch from 52af588 to 631a699 Compare September 24, 2025 12:59
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
bin/dev (1)

12-12: Update comment to match actual command pattern.

Line 12 should reflect the actual command pattern shown in the implementation.

Apply this diff:

-- bin/dev static: Uses Procfile.dev-static-assets
+# - bin/dev static: Uses Procfile.dev-static-assets
client/app/packs/stores-registration.js (1)

2-3: Optional: consider using a webpack alias to avoid deep relative paths.

If Shakapacker config supports it, alias client/app (e.g., @app) to write @app/bundles/comments/store/... and reduce fragile ../ hops.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4383625 and 631a699.

⛔ Files ignored due to path filters (2)
  • Gemfile.lock is excluded by !**/*.lock
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (24)
  • .github/workflows/js_test.yml (1 hunks)
  • .github/workflows/lint_test.yml (1 hunks)
  • .github/workflows/rspec_test.yml (1 hunks)
  • .gitignore (1 hunks)
  • Gemfile (1 hunks)
  • Procfile.dev-prod-assets (1 hunks)
  • Procfile.dev-static-assets (1 hunks)
  • app/views/layouts/application.html.erb (2 hunks)
  • app/views/layouts/stimulus_layout.html.erb (2 hunks)
  • bin/dev (2 hunks)
  • client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx (1 hunks)
  • client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx (1 hunks)
  • client/app/bundles/comments/startup/App/ror_components/App.jsx (1 hunks)
  • client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx (1 hunks)
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx (1 hunks)
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx (1 hunks)
  • client/app/bundles/comments/startup/serverRegistration.jsx (1 hunks)
  • client/app/packs/client-bundle.js (0 hunks)
  • client/app/packs/server-bundle.js (1 hunks)
  • client/app/packs/stimulus-bundle.js (1 hunks)
  • client/app/packs/stores-registration.js (1 hunks)
  • config/initializers/react_on_rails.rb (1 hunks)
  • config/shakapacker.yml (1 hunks)
  • package.json (1 hunks)
💤 Files with no reviewable changes (1)
  • client/app/packs/client-bundle.js
🚧 Files skipped from review as they are similar to previous changes (21)
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx
  • client/app/packs/stimulus-bundle.js
  • client/app/bundles/comments/startup/serverRegistration.jsx
  • Procfile.dev-static-assets
  • config/initializers/react_on_rails.rb
  • app/views/layouts/application.html.erb
  • client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx
  • .github/workflows/rspec_test.yml
  • config/shakapacker.yml
  • client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx
  • client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx
  • .github/workflows/js_test.yml
  • .github/workflows/lint_test.yml
  • Gemfile
  • client/app/bundles/comments/startup/App/ror_components/App.jsx
  • Procfile.dev-prod-assets
  • app/views/layouts/stimulus_layout.html.erb
  • .gitignore
  • package.json
  • client/app/packs/server-bundle.js
  • client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx
🧰 Additional context used
🪛 ESLint
client/app/packs/stores-registration.js

[error] 9-9: Insert

(prettier/prettier)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: test (22.x, 3.3.4)
🔇 Additional comments (4)
bin/dev (2)

21-28: Apply the previous fix for incorrect fallback path and poor error handling.

This is the same issue flagged in the previous review. The fallback require path ../../lib/react_on_rails/dev escapes the repository and will fail. The error handling also needs improvement.

Apply this diff:

-begin
-  require "bundler/setup"
-  require "react_on_rails/dev"
-rescue LoadError
-  # Fallback for when gem is not yet installed
-  puts "Loading ReactOnRails development tools..."
-  require_relative "../../lib/react_on_rails/dev"
-end
+begin
+  require "bundler/setup"
+  require "react_on_rails/dev"
+rescue LoadError => e
+  # Fallback for when the gem is not yet installed
+  warn "Loading ReactOnRails development tools... (#{e.message})" if ENV["DEBUG"]
+  begin
+    require_relative "../lib/react_on_rails/dev"
+  rescue LoadError
+    abort "ReactOnRails dev tools not found. Run `bundle install` or add lib/react_on_rails/dev."
+  end
+end

31-46: LGTM! Clean command dispatch pattern with proper error handling.

The implementation correctly maps different command arguments to appropriate ReactOnRails::Dev::ServerManager methods and provides clear error messages for unknown arguments. The case-based dispatch is well-structured and makes the script's behavior transparent.

client/app/packs/stores-registration.js (2)

1-3: No action needed — imports are store generator functions.

Both routerCommentsStore.js and commentsStore.js default-export arrow functions (export default (props, railsContext) => { ... }), so they satisfy ReactOnRails' store-generator requirement.


6-9: Correct ReactOnRails store registration — names match Rails usage. app/controllers/pages_controller.rb registers redux_store("routerCommentsStore", ...) and redux_store("commentsStore") (lines ~27 and ~33); layout includes redux_store_hydration_data.

Add trailing newlines to stores-registration.js and server-bundle.js
to comply with code style standards.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@justin808 justin808 requested a review from Copilot September 28, 2025 02:03
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR migrates the application to React on Rails v16 with auto-registration capabilities and updates to Shakapacker v8.4. The migration introduces automatic component registration through ror_components directories, eliminating the need for manual component registration and simplifying the development workflow.

  • Components are now auto-registered via dedicated ror_components directories instead of manual registration
  • Bundle structure reorganized with separate stores registration and auto-generated client/server bundles
  • Development tooling enhanced with updated Procfiles and CI workflows that generate React packs

Reviewed Changes

Copilot reviewed 24 out of 29 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
package.json Updates Sass and Shakapacker versions
config/shakapacker.yml Enables nested entries configuration
config/initializers/react_on_rails.rb Configures auto-registration with components subdirectory
client/app/packs/stores-registration.js New centralized store registration file
client/app/packs/stimulus-bundle.js Removes manual component registration, adds explanatory comments
client/app/packs/server-bundle.js Simplifies to import stores and auto-generated bundle
client/app/packs/client-bundle.js File removed as part of auto-registration migration
Multiple ror_components files Components moved to auto-registration directory structure with updated import paths
Layout files Updates asset loading to use append helpers and deferred loading
Procfile variants Clarifies development modes and processes
CI workflow files Adds React pack generation step before tests

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@@ -0,0 +1,129 @@
// Generated by ReScript, PLEASE EDIT WITH CARE
Copy link
Preview

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comment indicates this is a generated file, but it's being committed to version control. Generated files should typically be in .gitignore unless they're meant to be manually edited. Consider clarifying whether this file should be version controlled or generated during build.

Suggested change
// Generated by ReScript, PLEASE EDIT WITH CARE
// This file is generated by ReScript but is intentionally committed to version control and may be manually edited.

Copilot uses AI. Check for mistakes.

@@ -1,9 +1,9 @@
// Compare to ../ClientRouterApp.jsx
// Compare to ./RouterApp.client.jsx
Copy link
Preview

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment references './RouterApp.client.jsx' but the actual file appears to be located at the same directory level. Verify that this relative path is correct for the new directory structure.

Copilot uses AI. Check for mistakes.

@@ -1,9 +1,9 @@
// Compare to ../ServerRouterApp.jsx
// Compare to ./RouterApp.server.jsx
Copy link
Preview

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment references './RouterApp.server.jsx' but the actual file appears to be located at the same directory level. Verify that this relative path is correct for the new directory structure.

Copilot uses AI. Check for mistakes.

@justin808
Copy link
Member

/deploy-review-app

Copy link

github-actions bot commented Sep 28, 2025

✅ Deployment complete for PR #649, commit 84316f4

🚀 Review App for PR #649
🎮 Control Plane Console

📋 View Completed Action Build and Deploy Logs

- Move stylesheet_pack_tag and javascript_pack_tag to head element
- Prevents Turbo warning about scripts being loaded from body
- Scripts are still deferred to maintain performance
- Fixes browser console warning about script evaluation on page changes
Copy link

github-actions bot commented Sep 28, 2025

✅ Deployment complete for PR #649, commit 76f0fee

🚀 Review App for PR #649
🎮 Control Plane Console

📋 View Completed Action Build and Deploy Logs

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 84316f4 and 76f0fee.

📒 Files selected for processing (3)
  • app/views/layouts/application.html.erb (1 hunks)
  • app/views/layouts/stimulus_layout.html.erb (1 hunks)
  • pr-review-command.md (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: test (22.x, 3.3.4)
  • GitHub Check: deploy
  • GitHub Check: claude-review

Comment on lines 12 to 13
<%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
<%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Pass the pack name into the asset tag helpers. stylesheet_pack_tag and javascript_pack_tag both require at least one pack name argument. Calling them with only keyword options (Lines 12–13) raises ArgumentError, so every page using this layout will fail to render. Please supply the proper pack key (likely 'application', or whichever entrypoint now carries your global assets) before the options hash.

-  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
-  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
+  <%= stylesheet_pack_tag('application', media: 'all', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('application', 'data-turbolinks-track': true, defer: true) %>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
<%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
<%= stylesheet_pack_tag('application', media: 'all', 'data-turbolinks-track': true) %>
<%= javascript_pack_tag('application', 'data-turbolinks-track': true, defer: true) %>
🤖 Prompt for AI Agents
In app/views/layouts/application.html.erb around lines 12 to 13, the
stylesheet_pack_tag and javascript_pack_tag are being called with only keyword
options which raises ArgumentError; pass the pack name (e.g., "application" or
your actual Webpacker entrypoint) as the first argument to each helper before
the options hash so each call becomes stylesheet_pack_tag('application', media:
'all', 'data-turbolinks-track': true) and javascript_pack_tag('application',
'data-turbolinks-track': true, defer: true).

Comment on lines 13 to 14
<%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
<%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Restore pack names when calling pack helper methods. Line 13 currently calls stylesheet_pack_tag without a pack name. That helper requires at least one name; with only keyword arguments it raises ArgumentError: wrong number of arguments (given 0, expected 1+), so the layout will crash at render time. The same applies to the javascript_pack_tag on Line 14. Pass the intended pack (e.g., 'application' or whatever entrypoint holds the global assets) before the options hash.

-  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
-  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
+  <%= stylesheet_pack_tag('application', media: 'all', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('application', 'data-turbolinks-track': true, defer: true) %>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
<%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
<%= stylesheet_pack_tag('application', media: 'all', 'data-turbolinks-track': true) %>
<%= javascript_pack_tag('application', 'data-turbolinks-track': true, defer: true) %>
🤖 Prompt for AI Agents
In app/views/layouts/stimulus_layout.html.erb around lines 13 to 14, the
stylesheet_pack_tag and javascript_pack_tag are being called with only keyword
arguments which raises ArgumentError; supply the pack name (e.g., 'application'
or the actual entrypoint holding your global assets) as the first positional
argument before the options hash for both calls so the helpers receive at least
one name and the options (media, data-turbolinks-track, defer) remain unchanged.

Copy link

claude bot commented Sep 28, 2025

Code Review: Migration to React on Rails v16 Auto-Registration

I've reviewed PR #649 and the migration to React on Rails v16 auto-registration with Shakapacker v8.4. Here's my comprehensive feedback:

Strengths

  1. Clean Migration Pattern: The migration to auto-registration follows the recommended pattern with components moved to ror_components subdirectories.

  2. Improved Bundle Organization: Separation of stores registration (stores-registration.js) from component registration makes the architecture clearer.

  3. CI Pipeline Updates: Proper addition of react_on_rails:generate_packs steps in all workflow files ensures generated bundles are created before tests run.

  4. Development Experience: Enhanced dev tooling with multiple Procfile options (dev, dev-static-assets, dev-prod-assets) provides flexibility for different development scenarios.

🔍 Areas for Attention

1. Asset Loading Order (Performance)

The layout files now use append_*_pack_tag for Stimulus bundles but the order might affect initial page rendering:

  • Consider documenting why Stimulus bundles are loaded first
  • The defer attribute on JavaScript packs is good, but verify critical path rendering isn't affected

2. Generated Files in Version Control

  • Good practice adding **/generated/** to .gitignore
  • Ensure the team is aware that generated bundles must be created locally before running the app

3. Component Path Changes

Multiple components were moved to ror_components subdirectories. While the migration looks correct:

  • The ReScript generated file (RescriptShow.jsx) appears to be checked in - consider if this should be gitignored
  • Import paths have been updated consistently, but verify all references are caught

4. Bundle Size Implications

The removal of manual bundle splitting might affect initial load:

  • Monitor bundle sizes after deployment
  • Consider implementing code splitting if bundles grow significantly

🐛 Potential Issues

  1. Async Component Loading: The new auto-registration might change timing of component availability. Test thoroughly for race conditions.

  2. Server vs Client Routing: The split between RouterApp.client.jsx and RouterApp.server.jsx is maintained, but verify SSR still works correctly with auto-registration.

  3. Development Scripts: The bin/dev script has significant changes. Ensure all team members are aware of the new command structure.

🔒 Security Considerations

  • No obvious security concerns introduced
  • Dependencies updated appropriately (Shakapacker 8.4.0)
  • No sensitive data exposed in the diff

📋 Recommendations

  1. Documentation: Add a migration guide or update README to explain:

    • The new ror_components convention
    • When to run rails react_on_rails:generate_packs
    • New dev command options
  2. Testing: Ensure coverage for:

    • Component auto-registration
    • Store registration timing
    • SSR functionality
  3. Performance Monitoring: After deployment, monitor:

    • Initial page load time
    • Bundle sizes
    • Time to interactive

Overall Assessment

This is a well-executed migration that modernizes the codebase to use React on Rails v16's auto-registration feature. The changes follow best practices and maintain backward compatibility where needed. The PR is ready for merge after addressing the minor concerns above.

Approval: ✅ Approved with suggestions

The migration aligns with React on Rails v16 best practices and should improve maintainability. Great work on organizing the component structure and maintaining clear separation of concerns!

- Keep pack tags at end of body to allow react_component append calls
- Add data-turbo-suppress-warning to body tags to suppress Turbo warning
- This fixes CI failures while maintaining Shakapacker requirements
- React components can now properly append their JavaScript packs
Copy link

github-actions bot commented Sep 28, 2025

✅ Deployment complete for PR #649, commit 23b25b3

🚀 Review App for PR #649
🎮 Control Plane Console

📋 View Completed Action Build and Deploy Logs

Copy link

github-actions bot commented Sep 28, 2025

✅ Deployment complete for PR #649, commit e6cd9f4

🚀 Review App for PR #649
🎮 Control Plane Console

📋 View Completed Action Build and Deploy Logs

Copy link

claude bot commented Sep 28, 2025

Code Review: Migrate to react_on_rails v16 and shakapacker v8.4

Summary

This PR successfully upgrades the application to react_on_rails v16 with auto-registration and shakapacker v8.4, introducing significant architectural improvements including component auto-discovery, centralized store registration, and enhanced development tooling.

✅ Strengths

  • Clean Migration to Auto-Registration: The implementation of the ror_components subdirectory pattern is well-executed, making component discovery automatic and reducing boilerplate code
  • Improved Asset Loading: The switch to append_stylesheet_pack_tag and append_javascript_pack_tag with deferred main bundle loading optimizes initial page render
  • Enhanced Dev Experience: The refactored bin/dev script with explicit modes (hmr, static, prod) provides clear development workflows
  • ReScript Integration: Successfully adds ReScript-powered views with live updates and proper error handling
  • CI Pipeline Updates: Correctly adds react_on_rails:generate_packs to all CI workflows

⚠️ Areas of Concern

  1. Breaking Changes Management

    • The workaround in config/initializers/react_on_rails.rb:26 for test environment paths indicates a breaking change that might affect other environments
    • Migration from manual registration to auto-registration could break for teams with custom setups
  2. Duplicate Registrations

    • client/app/bundles/comments/startup/serverRegistration.jsx still contains manual registrations alongside the new auto-registration pattern
    • Stores are registered in both stores-registration.js and serverRegistration.jsx
  3. Component Structure Inconsistency

    • Some components moved to ror_components subdirectories while others remain in place
    • Footer.jsx was moved but the import paths in some files may need verification
  4. Development Procfiles

    • Multiple Procfile variants (Procfile.dev, Procfile.dev-prod-assets, Procfile.dev-static-assets) without clear documentation on when to use each

🔒 Security

  • No security vulnerabilities identified
  • Dependencies updated to latest stable versions
  • No exposed credentials or sensitive data

⚡ Performance Considerations

  • Positive: Deferred loading of main JavaScript bundles improves Time to Interactive
  • Positive: Stimulus bundles loaded early for better perceived performance
  • Concern: Auto-registration might include unused components in bundles - consider tree-shaking optimization

🧪 Test Coverage

  • CI workflows properly updated to generate packs before tests
  • Test-related files appear unchanged, maintaining existing coverage
  • Recommend running full test suite to verify no regressions

📝 Recommendations

  1. Documentation: Add migration guide for teams upgrading from v15 to v16
  2. Cleanup: Remove duplicate store registrations in serverRegistration.jsx
  3. Consistency: Complete the migration of all components to ror_components pattern
  4. Procfile Docs: Add comments to each Procfile explaining its use case
  5. Error Handling: Consider adding fallback for auto-registration failures
  6. Bundle Analysis: Run bundle analyzer to ensure no unnecessary code inclusion

Risk Level: Medium

The changes are substantial but well-implemented. Main risks are around breaking changes for existing setups and potential bundle size increases.

Recommendation: Approve with minor changes

The PR successfully achieves its goals. Address the duplicate registrations and add documentation for the breaking changes before merging.

Great work on this migration! The auto-registration pattern significantly improves developer experience. 🚀

Copy link

claude bot commented Sep 28, 2025

Code Review for PR #649: Migrate to react on rails auto-registration

Thank you for this comprehensive PR upgrading to React on Rails v16 with auto-registration! I've reviewed the changes, and here's my feedback:

Strengths

  1. Clean Migration Pattern: The move to auto-registration with the ror_components subdirectory pattern is well-executed and follows React on Rails v16 conventions properly.

  2. Proper Store Registration: Good separation of concerns by keeping store registration manual in stores-registration.js since stores aren't components.

  3. CI/CD Integration: Correctly added react_on_rails:generate_packs to all CI workflows, ensuring builds work properly.

  4. Dependency Management: Sensible version upgrades (shakapacker 8.2.0 → 8.4.0, sass pinned to 1.65.1).

  5. Development Tooling: Nice refactoring of bin/dev script with clearer argument parsing and better error handling.

🔍 Observations & Minor Suggestions

  1. Asset Loading Order: The change in application.html.erb to append Stimulus bundles first and defer global packs is a good performance optimization for faster initial rendering.

  2. Procfile Consolidation: The consolidation of Procfile variants is cleaner. Consider documenting the different modes in a README for team awareness.

  3. Generated Files: Adding **/generated/** to .gitignore is correct. The auto-generation approach reduces manual maintenance burden.

  4. ReScript Component: The RescriptShow component has been properly moved to the ror_components structure, maintaining compatibility.

⚠️ Areas to Monitor

  1. Bundle Size: With nested_entries: true in shakapacker config, monitor bundle sizes in production to ensure no unexpected increases.

  2. Development Performance: The auto-registration generation step adds build time. Consider adding timing logs if builds slow down noticeably.

  3. Error Handling: The generated RescriptShow component could benefit from more robust error boundaries around the ActionCable subscription.

📝 Recommendations

  1. Documentation: Consider adding migration notes to help other developers understand the new structure, especially the ror_components convention.

  2. Testing: The PR correctly updates CI, but consider adding a test to verify auto-registration works as expected in different environments.

  3. Rollback Plan: Document the rollback procedure if issues arise in production after deployment.

✔️ Overall Assessment

This is a well-structured migration that follows React on Rails v16 best practices. The auto-registration pattern will reduce boilerplate and improve developer experience. The changes are backwards compatible and the CI integration ensures reliability.

Approved with minor suggestions

Great work on this migration! The codebase will be easier to maintain with these improvements.

- Add TODO file explaining the root cause of Turbo warning
- Document attempted solutions and why they failed
- Provide potential future approaches to investigate
- This is a cosmetic issue that doesn't affect functionality
Copy link

claude bot commented Sep 28, 2025

Code Review for PR #649: React on Rails v16 Migration

Thank you for this comprehensive migration to React on Rails v16 with auto-registration! This is a substantial improvement that modernizes the codebase. Here is my detailed review:

Strengths

1. Auto-Registration Implementation

  • Excellent implementation of the v16 auto-registration pattern with the ror_components subdirectory structure
  • Clean separation between client and server bundles
  • Proper centralization of store registration in stores-registration.js

2. Build System Improvements

  • Good upgrade to Shakapacker 8.4.0 with nested entries support
  • Simplified Procfile configurations with clearer naming
  • Improved dev script with explicit mode selection

3. CI/CD Updates

  • Proper addition of react_on_rails:generate_packs step in all workflows
  • Good handling of generated files in .gitignore

⚠️ Issues to Address

1. Turbo Warning (Documented but Needs Resolution)

While you have documented the Turbo warning issue in TODO_TURBO_WARNING.md, this should be addressed:

  • The warning occurs because Turbo is loaded in the body instead of head
  • Consider extracting Turbo into a separate pack that can be loaded in the head
  • The current workaround works but creates console warnings

2. Missing Error Boundaries

The ReScript components lack error boundaries which could cause entire page crashes. Consider wrapping components like RescriptShow in an error boundary to gracefully handle failures.

3. Potential Race Condition in ActionCable

In RescriptShow.jsx, the ActionCable subscription and data fetching run in separate useEffect hooks which might cause timing issues. Consider combining these effects or ensuring proper sequencing to avoid missing initial data.

🔒 Security Considerations

1. Content Security Policy

  • The deferred script loading pattern is good for CSP
  • Ensure CSP headers are properly configured for the new pack structure

2. Dependency Updates

  • Good: Updated multiple dependencies with security fixes
  • Note: Some development dependencies could be further updated

🚀 Performance Observations

1. Positive Changes

  • Deferred script loading improves initial page load
  • Stimulus bundle separation allows better code splitting
  • Auto-registration reduces bundle size by eliminating duplicate registrations

2. Areas for Optimization

  • Consider lazy loading for ReScript components
  • The generated packs could benefit from chunk splitting for large applications

🧪 Test Coverage Suggestions

  1. Add integration tests for the auto-registration mechanism
  2. Test the different dev modes (hmr, static, prod)
  3. Ensure ActionCable reconnection scenarios are tested
  4. Add tests for the store registration flow

📝 Minor Suggestions

  1. File Organization: The ror_components naming is clear, but consider documenting this pattern in a README
  2. Platform Support: Good addition of multiple platform targets in Gemfile.lock
  3. Development Experience: The simplified bin/dev script is much cleaner
  4. Bundle Analysis: Consider adding webpack-bundle-analyzer to monitor bundle sizes with the new structure

🎯 Recommendations

  1. High Priority: Fix the Turbo warning issue before merging
  2. Medium Priority: Add error boundaries to ReScript components
  3. Medium Priority: Address the ActionCable race condition
  4. Low Priority: Document the migration pattern for future reference

Summary

This is a well-executed migration that brings significant improvements to the codebase. The auto-registration pattern is cleanly implemented and will make future development easier. The main concern is the Turbo warning which, while documented, should ideally be resolved. The ActionCable timing and error handling improvements would make the application more robust.

The migration successfully modernizes the build pipeline and aligns with React on Rails v16 best practices. With the Turbo issue resolved and some error handling improvements, this will be a solid foundation for future development.

Great work on this substantial upgrade!


Reviewed with a focus on code quality, performance, security, and maintainability.

Copy link

github-actions bot commented Sep 28, 2025

✅ Deployment complete for PR #649, commit 3aec6d1

🚀 Review App for PR #649
🎮 Control Plane Console

📋 View Completed Action Build and Deploy Logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants